iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1

前面幾篇做了幾個交易相關的API,而為了快速跳過後端API的建置,前端網頁要留存的資料源,就打算偷懶來快速建構JSON Server,顧名思義,就是建構一個以JSON文件留存的資料庫,同時最方便的是可以自動建置 GET、POST、PUT、PATCH、DELETE等API功能,簡化後端工作,快速是其優點,但因其無法配合設定權限等限制,其實只適合專案初期使用,待專案確認執行後,再進行實際的後端API的建置。

安裝及建置

安裝

npm install -g json-server

建置

按照官網的介紹,就來建立一個db.json的檔案
比照這次的需求,希望建置一個住戶的資料表及一些基本資料
以householder為例,有以下欄位

  • id:資料表key
  • name:住戶姓名
  • loginId:住戶ID
  • loginPass:住戶密碼
  • address:住戶地址
  • admin:網頁管理者註記
{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "Haoyun"
    }
  ],
  "householder": [
    { 
      "id": 1,
      "name": "蔡先生",
      "loginId": "D07-1",
      "loginPass": "d071",
      "address": "60號7樓",
      "admin": "Y"
    },
    {
      "id": 2,
      "name": "盧小小",
      "loginId": "B05-1",
      "loginPass": "b051",
      "address": "64號5樓",
      "admin": "N"
    },
    {
      "id": 2,
      "name": "張太太",
      "loginId": "B05-2",
      "loginPass": "b052",
      "address": "65號5樓",
      "admin": "N"
    }
  ],
  "profile": {
    "apartmentComplex ": "永豐社區"
  }
}

啟動服務

json-server db.json

https://ithelp.ithome.com.tw/upload/images/20210928/20140924Y0DOcgnUfc.png
會按照db.json
自動建立api,主要的API都會建立,

  • GET
    取得資料
  • POST
    新增資料
  • PUT
    更新資料列之全部欄位
  • PATCH
    更新資料列之部分欄位
  • DELETE
    刪除資料

簡單測試

  • 查詢
    查詢householder,測試範例如下
    https://ithelp.ithome.com.tw/upload/images/20210928/201409241uQdn4dPla.png

  • 新增
    新增住戶資料,測試範例如下
    https://ithelp.ithome.com.tw/upload/images/20210928/20140924ZaeCsmToCZ.png
    我們再來看看是不是真的新增了,再次查詢如下:
    https://ithelp.ithome.com.tw/upload/images/20210928/201409242iOkAVDU34.png

  • 修改
    修改id1的資料,將地址從60號7樓修改成60號7樓修改
    測試範例如下
    https://ithelp.ithome.com.tw/upload/images/20210928/20140924JWGNi90oC6.png
    我們再來看看是不是真的新增了,再次查詢如下:
    https://ithelp.ithome.com.tw/upload/images/20210928/20140924Wy8FHvbzcW.png

小結

是不是還蠻方便的,其實也是第一次使用json server,之前都是使用網路上的免費API測試,要客製化使用json server蠻方便的,還有一些變化的功能,這次測試後,覺得真的蠻方便的。
這次30天鐵人賽的目標,預期會花費較多的時間在不熟的網頁上,希望可以在30天結束後,可以建置出一個比較完整的網站,且可以正常執行收繳款及查詢的頁面。


上一篇
[day12]串接API實測-永豐訂單查詢API(日期查詢)
下一篇
[day14]Vue.js 網站基本建置
系列文
永豐Vue一下-從生活尋找靈感30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言